<template>
    <el-container>
        <el-aside class="menu">
            <el-menu class="menu-container" text-color="#fff" background-color="#444"
                     default-active="dashboard" active-text-color="#fff"
                     @select="(index)=>this.selIndex = index" router>
                <div class="menu-category-title">Dashboard</div>
                <el-menu-item index="dashboard" class="menu-item"
                              :class="{menuItemActive : (selIndex === 'dashboard')}">
                    <i class="iconfont icon-dashboard"></i>
                    <span>Dashboard</span>
                </el-menu-item>
                <el-menu-item index="goodsInfo" class="menu-item"
                              :class="{menuItemActive : (selIndex === 'goodsInfo')}">
                    <i class="iconfont icon-add"></i>
                    <span>商品信息</span>
                </el-menu-item>
                <div class="menu-category-title">首页配置</div>
                <el-menu-item index="bannerConfig" class="menu-item"
                              :class="{menuItemActive : (selIndex === 'bannerConfig')}">
                    <i class="iconfont icon-picture"></i>
                    <span>轮播图配置</span>
                </el-menu-item>
                <el-menu-item index="hotGoodsConfig" class="menu-item"
                              :class="{menuItemActive : (selIndex === 'hotGoodsConfig')}">
                    <i class="iconfont icon-hot"></i>
                    <span>热销商品配置</span>
                </el-menu-item>
                <el-menu-item index="newGoodsConfig" class="menu-item"
                              :class="{menuItemActive : (selIndex === 'newGoodsConfig')}">
                    <i class="iconfont icon-new"></i>
                    <span>新品上线配置</span>
                </el-menu-item>
                <el-menu-item index="recommendGoodsConfig" class="menu-item"
                              :class="{menuItemActive : (selIndex === 'recommendGoodsConfig')}">
                    <i class="iconfont icon-recommend"></i>
                    <span>为你推荐配置</span>
                </el-menu-item>
                <div class="menu-category-title">管理模块</div>
                <el-menu-item index="categoryManager" class="menu-item"
                              :class="{menuItemActive : (selIndex === 'categoryManager')}">
                    <i class="iconfont icon-category"></i>
                    <span>分类管理</span>
                </el-menu-item>
                <el-menu-item index="goodsManager" class="menu-item"
                              :class="{menuItemActive : (selIndex === 'goodsManager')}">
                    <i class="iconfont icon-goods"></i>
                    <span>商品管理</span>
                </el-menu-item>
                <el-menu-item index="memberManager" class="menu-item"
                              :class="{menuItemActive : (selIndex === 'memberManager')}">
                    <i class="iconfont icon-member"></i>
                    <span>会员管理</span>
                </el-menu-item>
                <el-menu-item index="orderManager" class="menu-item"
                              :class="{menuItemActive : (selIndex === 'orderManager')}">
                    <i class="iconfont icon-order"></i>
                    <span>订单管理</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main class="el-main">
            <el-header class="el-header">
                <div class="header-container">
                    <el-link :underline="false" @click="dashboardClick">Dashboard</el-link>
                    <el-dropdown @command="handleUserMenu">
                        <span class="el-dropdown-link">
                            <i class="iconfont icon-user"/>
                            {{user.name}}
                            <i class="el-icon-arrow-down el-icon--right"/>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="personalInfo">个人信息</el-dropdown-item>
                            <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
                            <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-header>
            <div class="content-wrap">
                <router-view/>
            </div>
            <el-footer class="el-footer">
                <div>
                    <span>Copyright © 2019-2020</span>
                    <span style="color: cornflowerblue">十三.</span>
                    <span>All rights reserved.</span>
                </div>

                <span>newbee-mall #Version 1.0.0</span>
            </el-footer>
        </el-main>

    </el-container>
</template>

<script>
    import {getUserInfoApi} from "../api/userApi";

    export default {
        name: "Home",
        data() {
            return {
                selIndex: 'dashboard',
                user: {
                    name: ''
                }
            }
        },
        created() {
            // 获取当前路径设置选中菜单项
            this.selIndex = this.$router.currentRoute.path.substr(1);
        },
        mounted() {
            this.getUserInfo();
        },
        methods: {
            getUserInfo() {
                this.loading = true
                getUserInfoApi().then(res => {
                    this.loading = false
                    if (res.status === 0) {
                        this.user = res.data
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
            dashboardClick() {
                this.selIndex = 'dashboard';
                this.$router.replace('/dashboard')
            },
            handleUserMenu(item) {
                switch (item) {
                    case 'personalInfo':
                        this.$router.replace('/personalInfo');
                        break;
                    case 'changePwd':
                        this.$router.replace('/changePwd');
                        break;
                    case 'logout':
                        this.$confirm("确认注销？").then(() => {
                            this.$store.commit('setToken', '');
                            this.$router.replace('/');
                        });
                        break;
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
    .el-container {
        height 100vh

        .menu {
            width 260px !important
            height 100%
            background-color #222

            .menu-container {
                padding: 0 6px;
                height: 100%;

                .menu-category-title {
                    padding: 10px 10px;
                    margin-top: 20px;
                    color: white;
                    text-align: left;
                }

                .menu-item {
                    text-align: left;
                    height: 42px;
                    line-height: 42px;
                    font-size: 1rem;
                }
            }
        }

        .el-main {
            padding 0

            .el-header {
                width 100%
                padding 10px 0

                .header-container {
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid #ccc;
                    padding: 15px;
                    background: #fff;

                    .el-link {
                        font-size 1.1rem
                    }
                }
            }

            .content-wrap {
                min-height calc(100vh - 120px)
            }

            .el-footer {
                border-top 1px solid #ccc
                display flex
                align-items center
                justify-content space-between
            }
        }
    }

    .menuItemActive {
        background-color: cornflowerblue !important;
    }

    .iconfont {
        margin-right 4px
    }
</style>
